<template>
    <div class="coming">
      <ul>
          <li v-for=" item in comingList" :key='item.id'>
               <div class="first">
                   <img :src='"/images/"+item.img' alt="">
               </div>
               <div class="second">
                   <p class="title">{{item.title}}</p>
                   <p><span class="font-color">{{item.number}}人想看</span></p>
                   <p class="actors font-color">{{item.actor}}</p>
                   <p class="font-color">未来30天内上映</p>
               </div>
               <div >
                   <button>预售</button>
               </div>
          </li>      
      </ul>
    </div>
</template>

<script>
export default {
 name:'coming',
 data(){
     return{
         comingList:[]
     }
 },
 methods:{
   coming(){
    // this.$axios.get('/mock/coming.json')
    this.$axios.get('/api/coming.json')

   .then((res)=>{
     console.log(res);
     if(res.status==200){
       this.comingList=res.data.comingList
     }
   })
   .catch((err)=>{
     console.log(err);
   })
   }
 },
 created(){
   this.coming()
 }
}
</script>

<style scoped>
  .now{
      width: 100%;
      margin-bottom: 35px;
  }
  img{
      width: 80px;
  }
  li{
      padding: 8px;
      overflow: hidden;
      border-bottom: 1px solid #ccc;
      
  }
 div{
     float:left;
 }
 .first{
     width: 20%;
 }
 .second{
     width:55%;
 }
 .actors{
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 .title{
     font-size: 20px;
     font-weight: bold;
 }
 p{
     line-height: 25px;
 }
 .font-color{
      color:#666
 }
 .score{
     color: #F90;
     margin-left: 5px;
   font-weight: bold;
 }
 button{
     background: rgb(75, 75, 231);
     border: none;
     border-radius: 5px;
     width: 50px;
     height: 30px;
     color:white
 }
</style>